<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;border: 0;outline: 0;box-sizing: border-box;}
			span{display: inline-block;}
			div{height: 100px;border: 1px solid #000;width: 152px;}
			span{height: 100%;width: 50px;line-height:100px;text-align:center;float: left;}
			span:nth-of-type(2){border-left: 1px solid #666;border-right: 1px solid #666;}
		</style>
	</head>
	<body>
		<div>
			<span id="减">-</span>
			<span id="结果">0</span>
			<span id="加">+</span>
		</div>
		<script type="text/javascript">
			// 第一步：界面
			// 第二步：实现减法
			var result = document.getElementById('结果'); // 对象缓存
			document.getElementById('减').onclick = function(){
				if(result.innerText > 0){
					result.innerText = +result.innerText - 1;
				}
			}
			document.getElementById('加').onclick = function(){
				result.innerText = +(result.innerText) + 1;
			}
		</script>
	</body>
</html>